import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { Layout } from 'antd';
import AppHeader from './components/Header';
import Login from './components/Login';
import Vip from './components/Vip';
import 'antd/dist/antd.css'
import './style.css';

import Detail from './containers/Detail';
import List from './containers/List';


const { Header, Footer, Content } = Layout;

class App extends Component {
    
    render() {
        return (
            // 为了使得AppHeader组件内可以使用路由Link，需要将BrowserRouter放在最外层
            <BrowserRouter>
                <Layout style={{ minWidth: 1300, height: '100%'}}>
                    <Header className="header">
                        <AppHeader />
                    </Header>
                    <Content className='content'>
                        <Login />                 
                        <Switch>
                            <Route path="/vip" component={Vip} />
                            <Route path="/detail/:id" component={Detail} />
                            <Route path="/:id?" component={List} />
                        </Switch>
                    </Content>
                    <Footer className='footer'>@copyright Yan-Ming 2019</Footer>
                </Layout>
            </BrowserRouter>
        )
    }

}

ReactDOM.render(<App />, document.getElementById('root'));
